<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我喜欢的案例" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
			<view class="search-content">
				<u-search
					placeholder="搜索关键词...."
					v-model="search_model"
					:show-action="false"
					height="68"
					bg-color="#f4f4f4"
					color="#333333"
					placeholder-color="#A0A0A0"
					search-icon-color="#A0A0A0"
					:clearabled="false"
					@search="searchBind"
				></u-search>
			</view>
			<view class="decoration-list">
				<view class="decoration-hall-list">
					<view class="item" v-for="(item, index) in decoration_list" :key="index">
						<view class="item-img"><image :src="item.img" class="img"></image></view>
						<view class="hidden">{{ item.title }}</view>
						<view class="tips-cont hidden">{{ item.tips }}</view>
						<view class="text-bot-cont flex justify-between">
							<view class="user-detail flex align-center">
								<view class="cu-avatar"><image :src="item.avatar" class="img"></image></view>
								<text class="username hidden">{{ item.username }}</text>
							</view>
							<view class="flex align-center" @click="Collection(index)">
								<i :class="item.iscollect ? 'cuIcon-likefill' : 'cuIcon-like'"></i>
								<text class="sc-text">{{ item.collectNum }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			decoration_list: [
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				}
			]
		};
	},
	onShow() {},
	mounted() {},
	methods: {
		searchBind(e) {
			console.log(e);
		},
		Collection(index) {
			this.decoration_list[index].iscollect = !this.decoration_list[index].iscollect;
			this.decoration_list[index].iscollect
				? (this.decoration_list[index].collectNum += 1)
				: (this.decoration_list[index].collectNum -= 1);
		},
		/*下拉刷新的回调 */
		downCallback() {
			console.log("下拉刷新");
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			console.log("上拉加载");
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.search-content {
		position: fixed;
		width: 100%;
		top: 182rpx;
		left: 0;
		padding: 0 22rpx;
		z-index: 9;
		background: white;
		/deep/.u-input {
			font-size: 24rpx !important;
		}
	}
	.decoration-list {
		margin-top: 100rpx;
	}
	.decoration-hall-list {
		padding: 20px 16rpx;
		overflow: hidden;
		.item {
			width: 50%;
			float: left;
			padding: 0 14rpx;
			margin-bottom: 38rpx;
			.item-img {
				height: 240rpx;
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tips-cont {
				margin-top: 18rpx;
				color: #ffb81e;
				font-size: 24rpx;
			}
			.text-bot-cont {
				.user-detail {
					width: 65%;
				}
				.cu-avatar {
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 50%;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.username {
					font-size: 24rpx;
					color: #999999;
					margin-left: 9rpx;
					width: 80%;
				}
				.sc-text {
					margin-left: 10rpx;
					font-size: 24rpx;
				}
				margin-top: 19rpx;
				.cuIcon-likefill {
					color: red;
				}
			}
		}
	}
}
</style>
